import React, { Component } from "react";
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css"
import "./cesium.css"

export default class Earth extends Component {
    viewer
    isSend = false
    constructor() {
        super()
        this.state = {
            longitude: 0, // 经度
            latitude: 0, //纬度
            heightView: 13017361.5, //视高
            lng: null, //三维地图鼠标位置经度
            lat: null,  //三维地图鼠标位置纬度
            isHidden: false //是否显示位置信息
        }
    }
    componentDidMount() {
        // 摄像机初始位置
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 26, 150.0, 35.5);
        // 创建球体实例
        this.viewer = new Cesium.Viewer("cesiumContainer", {
            loading: true,
            // 是否显示查找工具
            geocoder: false,
            // 是否显示动画控件
            animation: false,
            //是否显示时间轴控件。
            timeline: false,
            //是否显示基础图层切换按钮。
            baseLayerPicker: false,
            //是否显示全屏切换按钮。
            fullscreenButton: false,
            //是否显示默认 Logo 和 加载数据版权信息。
            showCredit: false,
            homeButton: false,//是否显示Home按钮    
            infoBox: false,//是否显示信息框    
            sceneModePicker: false,//是否显示3D/2D选择器 
            navigationHelpButton: false,//是否显示右上角的帮助按钮 
            imageryProvider: new Cesium.UrlTemplateImageryProvider({
                url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            }),
        })
        this.hand()
    }
    componentDidUpdate() {
        if (this.props.flag === "dataToCesium") {
            this.saveData()
        }

    }
    // 绑定事件并传值
    hand = () => {
        let scene = this.viewer.scene
        let camera = this.viewer.camera
        let canvas = scene.canvas;

        // //具体事件的实现
        let ellipsoid = this.viewer.scene.globe.ellipsoid;
        let handler = new Cesium.ScreenSpaceEventHandler(canvas);
        // 鼠标移动事件
        handler.setInputAction((movement) => {
            // 鼠标进入三维地图
            this.setState({
                isHidden: true
            })
            // 更新鼠标所在位置经纬度
            let mouseCartesian = camera.pickEllipsoid(movement.endPosition, ellipsoid);
            if (mouseCartesian) {
                let mouseCartographic = Cesium.Cartographic.fromCartesian(mouseCartesian)
                this.setState({
                    lat: Cesium.Math.toDegrees(mouseCartographic.latitude).toFixed(4),
                    lng: Cesium.Math.toDegrees(mouseCartographic.longitude).toFixed(4),
                })
            }
            // 捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
            const center = new Cesium.Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2)
            let cartesian = camera.pickEllipsoid(center, ellipsoid);
            if (cartesian) {
                //将笛卡尔三维坐标转为地图坐标（弧度）
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

                //将地图坐标（弧度）转为十进制的度数
                this.setState({
                    latitude: Cesium.Math.toDegrees(cartographic.latitude).toFixed(4),
                    longitude: Cesium.Math.toDegrees(cartographic.longitude).toFixed(4),
                })
            }
            if (this.isSend) {
                this.sendData()
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // 鼠标左键按下事件
        handler.setInputAction((movement) => {
            this.isSend = true
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

        // 鼠标左键抬起事件
        handler.setInputAction((movement) => {
            this.isSend = false
        }, Cesium.ScreenSpaceEventType.LEFT_UP)
        // 鼠标滚动事件
        handler.setInputAction((movement) => {

            //将地图坐标（弧度）转为十进制的度数
            this.setState({
                heightView: camera.positionCartographic.height
            })
            //向父组件传视角高度
            this.props.getHeightView(this.state.heightView, "dataToLeaflet")
        }, Cesium.ScreenSpaceEventType.WHEEL)
        const threeEarth = document.getElementById("cesiumContainer")
        threeEarth.onmouseleave = () => {
            this.setState({
                isHidden: false
            })
        }
    }
    // 接收父组件参数更新界面
    saveData = () => {
        let camera = this.viewer.camera
        const data = this.props.data
        const destination = Cesium.Cartesian3.fromDegrees(Number(data.longitude), Number(data.latitude), Number(data.heightView));
        camera.flyTo({
            destination: destination
        });
    }
    // 传值函数
    sendData = () => {
        //向父组件传经纬度 
        this.props.getDatas({
            longitude: this.state.longitude,
            latitude: this.state.latitude,
        }, "dataToLeaflet")

    }

    render() {
        return (
            <div>
                <div id="cesiumContainer"></div>
                <div className={this.state.isHidden ? "foot" : "footer"}>
                    <div>经度:{this.state.lng}</div>
                    <div>纬度:{this.state.lat}</div>
                    <div>视点高度:{this.state.heightView.toFixed(1)}km</div>
                </div>
            </div>
        );
    }
}
